<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="right">
				<view class="edit" @tap="editBirthday()">
					保存
				</view>
			</block>
		</hx-navbar>
		<view class="flex justify-between align-center" style="height: 116rpx;background-color: #fff;
			padding: 30rpx;margin-top: 30rpx;">
			<view class="avatar">
				生日
			</view>
			<view class="flex align-center" @click="openDatetimePicker">
				<view style="margin-right: 20rpx;">{{birthday}}</view>
				<image src="../../static/2068.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
			</view>
		</view>
		<SimpleDateTimePicker ref="myPicker" @submit="handleSubmit" :start-year="1950" :end-year="endYear" />
	</view>
</template>

<script>
	import SimpleDateTimePicker from "uni_modules/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue";
	export default {
		components: {
			SimpleDateTimePicker,
		},
		data() {
			return {
				birthday: undefined,
				endYear: '',
				// 标题栏配置
				config: {
					title: "修改生日",
					back: true,
					color: "#111111",
					rightSlot: true,
					backgroundColor: [1, "#FFFFFF"],
				},
				birthday: '',
			}
		},
		onLoad(e) {
			this.birthday = e.birthday
			this.endYear = new Date().getFullYear()
		},
		methods: {
			// 打开picker
			openDatetimePicker() {
				this.$refs.myPicker.show();
			},
			// 关闭picker
			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},
			handleSubmit(e) {
				// {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
				this.birthday = `${e.year}-${e.month}-${e.day}`;
			},
			editBirthday() {
				let data = {
					birthday: new Date(this.birthday)
				}
				this.$api.deitInformation(data).then((res) => {
					
					if (res.statusCode == 200) {
						uni.navigateBack(1)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.picker-view {
		height: 200rpx;
	}

	.item {
		height: 98rpx !important;
		text-align: center; // 文字水平居中
		font-size: 32rpx;
		line-height: 98rpx; // 让height = line-height文字就可垂直居中
		color: #333;
	}

	.picker-box {
		height: 98rpx !important;
	}

	.title {
		color: $u-type-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}

	.edit {
		width: 162rpx;
		height: 70rpx;
		background: #492D22;
		border-radius: 10rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 32rpx;
		color: #ffffff;
		color: #ffffff;
		margin-right: 30rpx;
	}

	.name {
		margin-top: 30rpx;
		padding: 30rpx;
		background-color: #fff;
	}
</style>
